<template>
	<view class="container">
		<view class="bg-colore"></view>
		<view class="content">
			<!-- <topLogo></topLogo> -->
			<view class="wrap">
				<view class="order-div">
					<!-- 地址 -->
					<navigator url="/pages/address/address?source=1" class="address-section">
						<view class="order-content" v-if="isAddress">
							<view class="top">
								<text class="huiwz">姓名：</text>
								<text class="bigwz">{{ addressData.name }}</text>
								<text class="huiwz" style="padding-left: 40rpx">手机号：</text>
								<text class="bigwz">{{ addressData.phone }}</text>
							</view>
							<view class="bottom">
								<image src="/static/sj_sqlocation.png" mode="scaleToFill" class="image"></image>
								{{ addressData.detailAddress }}
							</view>
							<view class="bottom fanwei" v-if="typeId == 2 && !payFlag">
								不在配送范围
								<view class="btncss xiaozi" @click="$public.navto('distributionMap', { address: addressData.detailAddress })">查看范围</view>
							</view>
							<view class="cen">
								<view class="top">
									<text class="name">收货人：{{ addressData.name }}</text>
									<text class="mobile">{{ addressData.phone }}</text>
								</view>
								<text class="address">地址：{{ addressData.detailAddress }}</text>
							</view>
						</view>
						<uni-list v-else>
							<uni-list-item showArrow title="请选择收货地址" thumb="/static/sj_sqlocation.png" thumb-size="sm" class="zxshdz" />
						</uni-list>
					</navigator>

					<view class="goods-section">
						<!-- <view class="title">订单结算</view> -->
						<!-- 商品列表 -->
						<view class="g-item" v-for="(item, index) in goodList" :key="index">
							<view class="first">
								<view class="right">
									<view class="img">
										<image :src="$public.imgageUrl(item.image)" mode="scaleToFill" class="image"></image>
									</view>
									<view class="text-div">
										<view class="title">
											{{ item.title }}
										</view>
										<view class="text-bottom">
											<view class="money">
												<text v-if="typeId == 1">¥{{ item.money }}+{{ item.price }}积分</text>
												<text v-else>¥{{ item.money }}</text>
											</view>
											<view class="num">
												<text style="font-size: 20rpx">X</text>
												{{ item.num }}
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class="bottom-box">
							<view class="" v-if="typeId == 5">
								<view class="bottom-flex youhuijuan">
									<view class="huiwz">可获得{{ fanJf }}积分</view>
									<!-- <view class="huiwz">可获得{{ fanJf }}积分</view> -->
									<view class="huiwz">共计{{ goodList.length }}件商品 应付￥{{ moneyTotal }}</view>
								</view>
								<view class="bottom-flex youhuijuan">
									<view class="huiwz">配送方式</view>
									<view class="huiwz">快递 {{ kdText }}</view>
								</view>
								<view class="bottom-flex youhuijuan">
									<view class="huiwz">买家留言</view>
									<view class="huiwz txText">
										<uni-easyinput v-model="mjRemark" placeholder="选填：对本次交易的说明" />
									</view>
								</view>
								<view class="bottom-flex youhuijuan">
									<view class="huiwz">优惠卷</view>
									<view class="huiwz" @click="openYHJ">{{ yhjText }} ></view>
								</view>
							</view>
							<view class="bottom-flex" v-else @click="showPopup">
								<view class="huiwz">共计{{ goodList.length }}件商品</view>
								<view class="huiwz">可获得{{ fanJf }}积分</view>
								<view class="">应付￥{{ moneyTotal }}</view>
							</view>
							<view class="bottom-flex youhuijuan" v-if="typeId == 6">
								<view class="huiwz">配送方式</view>
								<view class="huiwz">快递 {{ kdText }}</view>
							</view>

							<view class="bottom-flex" v-if="typeId == 1">
								<view class="huiwz">积分抵扣</view>
								<view class="hongzi">-{{ total }}积分</view>
							</view>
							<view class="zuizhong" v-if="yhjFlag">
								实付总计：
								<text class="huangzi">￥{{ yhjData.typeId == 2 ? moneyTotal - yhjData.money : moneyTotal * (yhjData.money / 10) }}</text>
							</view>
							<view class="zuizhong" v-else>
								实付总计：
								<text class="huangzi">￥{{ moneyTotal + kdMoney }}</text>
							</view>
							总计：¥{{ moneyTotal }}+{{ total }}积分
						</view>
					</view>
				</view>
				<view class="xiabtn">
					<view class="btncss" @click="submit" v-if="payFlag">
						{{ moneyTotal == 0 ? '兑换' : '支付' }}
					</view>
					<view class="btncss huise" v-else>不在配送范围内</view>
				</view>
			</view>
		</view>
		<uni-popup ref="YHJ" type="dialog">
			<view class="juan-div">
				<view class="gundong">
					<view class="list" :class="item.overNum >= item.number ? 'no' : ''" v-for="(item, index) in juanData" :key="index">
						<view class="left">
							<text v-if="item.typeId == 1">
								{{ item.money }}
								<text class="small">折</text>
							</text>
							<text v-else>
								<text class="small">￥</text>
								{{ item.money }}
							</text>
						</view>
						<view class="xian">
							<view class="shang"></view>
							<view class="zhong">
								<view class="zhongxian"></view>
							</view>
							<view class="xia"></view>
						</view>
						<view class="right">
							<view class="title">
								{{ item.bak2 ? item.bak2 : '优惠劵' }}
							</view>
							<view class="time">{{ item.startTime.split(' ')[0] }}—{{ item.endTime.split(' ')[0] }}生效</view>
							<view class="btn">
								<view class="btncss" @click="useYhj(item)">使用</view>
							</view>
						</view>
					</view>
				</view>
				<view class="gundong">
					<view class="list" :class="item.overNum >= item.number ? 'no' : ''" v-for="(item, index) in juanData" :key="index">
						<view class="left">
							<text v-if="item.typeId == 1">
								{{ item.money }}
								<text class="small">折</text>
							</text>
							<text v-else>
								<text class="small">￥</text>
								{{ item.money }}
							</text>
						</view>
						<view class="xian">
							<view class="shang"></view>
							<view class="zhong">
								<view class="zhongxian"></view>
							</view>
							<view class="xia"></view>
						</view>
						<view class="right">
							<view class="title">
								{{ '温邻豆' }}
							</view>
							<view class="time">{{ item.startTime.split(' ')[0] }}—{{ item.endTime.split(' ')[0] }}生效</view>
							<view class="btn">
								<view class="btncss" @click="useYhj(item)">使用</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 优惠券 -->
			<view class="gundong">
				<view class="list" :class="item.overNum >= item.number ? 'no' : ''" v-for="(item, index) in juanData" :key="index">
					<view class="left">
						<text v-if="item.typeId == 1">
							{{ item.money }}
							<text class="small">折</text>
						</text>
						<text v-else>
							<text class="small">￥</text>
							{{ item.money }}
						</text>
					</view>
					<view class="xian">
						<view class="shang"></view>
						<view class="zhong">
							<view class="zhongxian"></view>
						</view>
						<view class="xia"></view>
					</view>
					<view class="right">
						<view class="title">
							{{ item.bak2 ? item.bak2 : '优惠劵' }}
						</view>
						<view class="time">{{ item.startTime.split(' ')[0] }}—{{ item.endTime.split(' ')[0] }}生效</view>
						<view class="btn">
							<view class="btncss" @click="useYhj(item)">使用</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>

		<uni-popup ref="popup" type="dialog">
			<view class="juan-div">
				<!-- 优惠券 -->
				<view class="gundong">
					<view class="list" :class="item.overNum >= item.number ? 'no' : ''" v-for="(item, index) in juanData" :key="index">
						<view class="left">
							<text v-if="item.typeId == 1">
								{{ item.money }}
								<text class="small">折</text>
							</text>
							<text v-else>
								<text class="small">￥</text>
								{{ item.money }}
							</text>
						</view>
						<view class="xian">
							<view class="shang"></view>
							<view class="zhong">
								<view class="zhongxian"></view>
							</view>
							<view class="xia"></view>
						</view>
						<view class="right">
							<view class="title">
								{{ item.bak2 ? item.bak2 : '优惠劵' }}
							</view>
							<view class="time">{{ item.startTime.split(' ')[0] }}—{{ item.endTime.split(' ')[0] }}生效</view>
							<view class="btn">
								<view class="btncss" @click="useYhj(item)">使用</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 温邻豆 -->
				<view class="gundong">
					<view class="list" :class="item.overNum >= item.number ? 'no' : ''" v-for="(item, index) in juanData" :key="index">
						<view class="left">
							<text v-if="item.typeId == 1">
								{{ item.money }}
								<text class="small">折</text>
							</text>
							<text v-else>
								<text class="small">￥</text>
								{{ item.money }}
							</text>
						</view>
						<view class="xian">
							<view class="shang"></view>
							<view class="zhong">
								<view class="zhongxian"></view>
							</view>
							<view class="xia"></view>
						</view>
						<view class="right">
							<view class="title">
								{{ '温邻豆' }}
							</view>
							<view class="time">{{ item.startTime.split(' ')[0] }}—{{ item.endTime.split(' ')[0] }}生效</view>
							<view class="btn">
								<view class="btncss" @click="useYhj(item)">使用</view>
							</view>
						</view>
					</view>
				</view>

				<!-- 积分兑换 -->
				<view class="gundong">
					<view class="list" :class="item.overNum >= item.number ? 'no' : ''">
						<view class="left">
							<text v-if="item.typeId == 1">
								{{ 1 }}
								<text class="small">折</text>
							</text>
							<text v-else>
								<text class="small">￥</text>
								{{ 1 }}
							</text>
						</view>
						<view class="xian">
							<view class="shang"></view>
							<view class="zhong">
								<view class="zhongxian"></view>
							</view>
							<view class="xia"></view>
						</view>
						<view class="right">
							<view class="title">
								{{ '积分兑换' }}
							</view>
							<view class="time">{{ 1 }}—{{ 1 }}生效</view>
							<view class="btn">
								<view class="btncss" @click="useYhj(item)">使用</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			buyValue: {
				productId: 1,
				num: 1,
				model: '1-1'
			},
			desc: '', //备注
			payType: 1, //1微信
			remark: '',
			isAddress: false,
			addressData: {},
			goodList: [],
			total: 0,
			moneyTotal: 0,
			orderId: 0,
			typeId: 1,
			juanData: [],
			yhjText: '未使用优惠卷',
			yhjFlag: false,
			yhjData: {} /* 优惠券所有数据 */,
			mjRemark: '',
			fanJf: '',
			kdText: '',
			kdMoney: 0,
			payFlag: true
		};
	},
	onLoad(options) {
		// this.$public.isLoginUrl()
		if (options.order) {
			this.loadOrder(decodeURIComponent(options.order));
		} else {
			console.log('options.data', decodeURIComponent(options.data));
			let data = JSON.parse(decodeURIComponent(options.data));
			this.goodList = data.goodsData;
			this.fanJf = this.$_.sumBy(this.goodList, 'fanJf');
			this.typeId = data.goodsData[0].typeId;

			if (this.typeId >= 5) this.getKd();
			this.calcTotal();
			// console.log("goodList", this.goodList)
			this.createOrder();
		}
		let myaddress = uni.getStorageSync('myaddress');
		if (myaddress) {
			if (myaddress.productModel == 1) {
				this.tabCurrentIndex = myaddress.productModel;
				this.zitiId = myaddress.addressId;
				this.zitiaddress = myaddress.addressAddress;
			} else {
				this.isAddress = true;
				this.addressData.name = myaddress.addressName;
				this.addressData.phone = myaddress.addressPhone;
				this.addressData.addressId = myaddress.addressId;
				this.addressData.detailAddress = myaddress.addressAddress;
			}
			if (this.typeId == 2) this.getDistributionList();
		} else {
			this.loadAddress();
		}
		if (this.typeId == 5) this.getCoupon();
	},
	onShow() {
		if (!this.$public.isLoginUrl()) return false;
	},
	methods: {
		showPopup() {
			this.$refs.popup.open('bottom');
		},
		hidePopup() {
			this.isPopupVisible = false;
		},
		getDistributionList() {
			let that = this;
			this.$public.htmlPost('/api/getDistributionList').then((res) => {
				console.log('getDistributionList res', res);
				let data = res.data;
				if (data.code == 0) {
					let addressPoint = this.$public
						.geocoder(this.addressData.detailAddress)
						.then((res) => {
							console.log('addressPoint', res);
							let lat = res.result.location.lat;
							let lng = res.result.location.lng;
							console.log('addressPoint', addressPoint);
							let flag = false;
							data.data.forEach((item) => {
								let itemPoint = item.bak1.replace('，', ',').split(',');
								let juli = that.$public.distance(itemPoint[0], itemPoint[1], lat, lng) * 1000;
								console.log('juli', juli);
								if (juli <= item.bak3) {
									flag = true;
									return;
								}
							});
							if (!flag) {
								that.payFlag = false;
							} else {
								that.payFlag = true;
							}
						})
						.catch((e) => {
							console.log(e, '解释地址失败');
							that.payFlag = false;
						});
				}
			});
		},
		getCoupon() {
			let that = this;
			this.$public.htmlPost('/api/getCoupon').then((res) => {
				console.log('getCoupon res', res);
				let data = res.data;
				if (data.code == 0) {
					data.data.forEach((item) => {
						if (item.status == 0) {
							if (item.typeId == 1 || (item.typeId == 2 && item.minMoney <= that.moneyTotal)) that.juanData.push(item);
						}
					});
				}
			});
		},
		getKd() {
			let kdMoney = 0;
			this.goodList.forEach((item) => {
				if (item.num < item.kdByNum) kdMoney = kdMoney + item.kdMoney;
			});
			this.kdMoney = kdMoney;
			if (kdMoney > 0) this.kdText = kdMoney + '元';
			else this.kdText = '包邮';
		},
		loadOrder(json) {
			// console.log("json", json)
			let data = JSON.parse(json);
			console.log('data', data);
			this.goodList = JSON.parse(data.json);
			this.fanJf = this.$_.sumBy(this.goodList, 'fanJf');
			this.typeId = this.goodList[0].typeId;
			this.orderId = data.orderId;
			this.total = data.integral;
			this.moneyTotal = data.money;
			if (this.typeId == 5) {
				this.kdMoney = data.kdMoney;
				if (this.kdMoney > 0) this.kdText = this.kdMoney + '元';
				else this.kdText = '包邮';
			}
			// this.moneyPay = data.money
			// console.log("this.moneyTotal", this.moneyTotal)
		},
		createOrder() {
			let that = this;
			let json = [];
			this.goodList.forEach((item) => {
				let itemJson = {
					cartId: item.cartId,
					productId: item.productId,
					model: item.model,
					num: item.num,
					image: item.image,
					attr_val: item.attr_val,
					price: item.price,
					title: item.params.product.title,
					typeId: item.typeId,
					money: item.money,
					fanJf: item.fanJf ? item.fanJf : 0
				};
				json.push(itemJson);
			});
			this.$public
				.htmlPost('/api/addOrder', {
					json: JSON.stringify(json),
					integral: this.total,
					money: this.moneyTotal,
					remark: this.remark,
					typeId: this.typeId,
					kdMoney: this.kdMoney,
					fanJf: this.$_.sumBy(json, 'fanJf')
				})
				.then((res) => {
					console.log('创建订单', res);
					let { code, data } = res.data;
					if (code == 0) {
						this.orderId = data.orderId;
						this.total = data.integral;
					} else {
						// this.$api.msg(res.data.msg)
						uni.showModal({
							title: '温馨提示',
							content: res.data.msg,
							showCancel: false,
							success() {
								that.$public.navBack();
							}
						});
					}
				});
		},
		loadAddress() {
			this.$public
				.htmlPost('/api/getAddressList', {
					typeId: 1
				})
				.then((res) => {
					console.log('地址列表', res);
					if (res.data.data.length > 0) {
						this.isAddress = true;
						this.addressData = res.data.data[0];
						if (this.typeId == 2) this.getDistributionList();
					}
				});
		},
		updateOrder() {
			let params = {
				orderId: this.orderId,
				addressName: this.addressData.name,
				addressPhone: this.addressData.phone,
				productModel: this.tabCurrentIndex,
				remark: this.mjRemark
			};
			if (this.tabCurrentIndex == 1) {
				params.addressId = this.zitiId;
				params.addressAddress = this.zitiaddress;
			} else {
				params.addressId = this.addressData.addressId;
				params.addressAddress = this.addressData.detailAddress;
			}
			uni.setStorage({
				key: 'myaddress',
				data: params
			});
			let that = this;
			this.$public.htmlPost('/api/updateOrder', params).then((res) => {
				// console.log("修改订单地址", res)
				if (res.data.code == 0) that.openPay();
			});
		},
		submit() {
			if (this.tabCurrentIndex == 1) {
				if (this.zitiId == 0) {
					uni.showToast({
						icon: 'error',
						title: '请先选择自提点'
					});
					return false;
				}
			} else {
				if (!this.isAddress) {
					uni.showToast({
						icon: 'error',
						title: '请先选择收货地址'
					});
					return false;
				}
			}
			this.updateOrder();
			// this.$public.navto('/pages/money/paySuccess', {
			// 	orderId: this.orderId,
			// 	price: this.total,
			// 	money: this.moneyTotal,
			// 	image: this.goodList[0].image
			// });
		},
		//计算总价
		calcTotal() {
			let list = this.goodList;
			if (list.length === 0) {
				this.empty = true;
				return;
			}
			let total = 0;
			let moneyTotal = 0;
			let checked = true;
			list.forEach((item) => {
				total += item.price * item.num;
				moneyTotal += item.money * item.num;
			});
			this.allChecked = checked;
			this.total = Number(total.toFixed(2));
			this.moneyTotal = Number(moneyTotal.toFixed(2));
		},
		stopPrevent() {},
		tabClick(index) {
			// console.log(222)
			this.tabCurrentIndex = index;
		},
		openYHJ() {
			this.$refs.YHJ.open('bottom');
		},
		useYhj(item) {
			this.yhjText = item.bak2;
			this.yhjData = item;
			this.yhjFlag = true;
			this.$refs.YHJ.close();
		},
		//开始支付
		async openPay() {
			let that = this;
			if (this.moneyTotal == 0) {
				this.$public
					.htmlPost('/api/payOrder', {
						orderId: this.orderId
					})
					.then((res) => {
						if (res.data.code == 0) {
							that.$public.reLaunch('/pages/order/paySuccess', {
								orderId: that.orderId,
								type: that.payType,
								code: res.data.data.code,
								money: that.moneyTotal,
								price: that.total,
								typeId: that.typeId
							});
						}
					});
			} else {
				let params = {
					orderId: this.orderId
				};
				if (this.typeId == 5 && this.yhjFlag) {
					params.couponId = this.yhjData.couponId;
				}
				this.$public.htmlPost('/api/maCreateOrder', params).then((res) => {
					console.log('获取订单数据', res);
					if (res.data.code == 0) {
						let { code } = res.data.data;
						console.log('res.data.timestamp', res.data.timestamp);
						uni.requestPayment({
							provider: 'wxpay', //支付类型-固定值
							timeStamp: res.data.data.timeStamp, // 时间戳（单位：秒）
							nonceStr: res.data.data.nonceStr, // 随机字符串
							package: res.data.data.package, // 固定值
							signType: res.data.data.signType, //固定值
							paySign: res.data.data.paySign, //签名
							success: function (res) {
								console.log('success', res);
								// console.log("支付成功");
								that.$public.reLaunch('/pages/order/paySuccess', {
									orderId: that.orderId,
									type: that.payType,
									code: code,
									money: that.moneyTotal,
									price: that.total,
									typeId: that.typeId
								});
							},
							fail: function (err) {
								// console.log("fail", {
								// 	orderId: that.orderId,
								// 	type: that.payType,
								// 	code: code,
								// 	money: that.moneyTotal,
								// 	price: that.total,
								// 	typeId: that.typeId
								// });
								// console.log("支付失败");
								// that.$public.reLaunch("/pages/order/paySuccess", {
								// 	orderId: that.orderId,
								// 	type: that.payType,
								// 	code: code,
								// 	money: that.moneyTotal,
								// 	price: that.total,
								// 	typeId: that.typeId
								// })
							}
						});
					} else {
						this.$api.msg(res.data.msg);
					}
				});
			}
		}
	}
};
</script>

<style lang="scss">
.content {
	padding-top: 30rpx;

	.wrap {
		padding: $uni-wrap-padding;
	}
}

.huiwz {
	font-size: 28rpx;
	color: #999999;

	&.txText {
		width: 500rpx;
	}
}

.address-section {
	.order-content {
		// display: flex;
		// align-items: center;
		// justify-content: space-between;
		// height: 120rpx;
		// padding: 0 30rpx;
		// color: #666666;
		// font-size: 30rpx;
		background: #fff;
		border-radius: 16rpx;
		padding: 30rpx;

		.top {
			padding-bottom: 24rpx;
			border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
			margin-bottom: 24rpx;

			.bigwz {
				font-size: 28rpx;
				color: #333333;
			}
		}

		.bottom {
			font-size: 26rpx;
			color: #666666;
			display: flex;
			align-items: center;

			&.fanwei {
				margin-top: 20rpx;
				color: #c90205;

				.xiaozi {
					width: 120rpx;
					height: 40rpx;
					letter-spacing: normal;
					font-size: 24rpx;
					font-weight: normal;
					margin-left: 20rpx;
					line-height: 40rpx;
				}
			}

			.image {
				width: 32rpx;
				height: 32rpx;
				margin-right: 16rpx;
			}
		}
	}

	.address {
		margin-top: 16upx;
		margin-right: 20upx;
		color: $font-color-light;
	}

	.icon-you {
		font-size: 32upx;
		color: $font-color-light;
		margin-right: 30upx;
	}

	.zxshdz {
		border-radius: 16rpx;
	}
}

.goods-section {
	margin-top: 25rpx;
	background: #fff;
	border-radius: 16rpx;
	// padding-bottom: 1px;
	padding: 20rpx;
	color: #333333;

	// .title {
	// 	font-size: 32rpx;
	// 	padding: 30rpx 15rpx;
	// }

	.g-item {
		border-bottom: $uni-wl-bottom-border;
		padding-bottom: 24rpx;
		margin-bottom: 24rpx;
	}

	.right {
		// width: 560rpx;
		display: flex;

		.img {
			width: 176rpx;

			.image {
				width: 160rpx;
				height: 160rpx;
				border-radius: 10rpx;
			}
		}

		.text-div {
			width: 454rpx;
			// display: flex;

			.title {
				font-size: 28rpx;
				color: #333333;
				line-height: 40rpx;
				height: 80rpx;
				display: -webkit-box;
				/* 将文本显示为块级盒子 */
				-webkit-line-clamp: 2;
				/* 最多显示两行文本 */
				-webkit-box-orient: vertical;
				/* 设置盒子内文本的垂直方向排列 */
				overflow: hidden;
				/* 隐藏溢出的文本 */
				text-overflow: ellipsis;
				/* 显示省略号 */
				margin-bottom: 32rpx;
			}

			.text-bottom {
				height: 48rpx;
				display: flex;
				justify-content: space-between;

				.money {
					font-size: 32rpx;
					color: #333333;

					text {
						font-size: 24rpx;
					}
				}
			}
		}
	}

	.price-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 32rpx;
		color: #ff0000;
		padding: 35rpx 0 0 28rpx;
	}

	.bottom-box {
		// display: flex;
		// align-items: center;
		// justify-content: flex-end;
		// height: 120rpx;
		// border-top: $uni-wl-bottom-border;
		color: #333;
		font-size: 28rpx;

		// margin-top: 55rpx;
		.bottom-flex {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 24rpx;

			.hongzi {
				color: #c90205;
			}

			&.youhuijuan {
				padding-top: 26rpx;
				border-top: $uni-wl-bottom-border;
			}
		}

		.zuizhong {
			display: flex;
			justify-content: flex-end;
			border-top: $uni-wl-bottom-border;
			padding-top: 26rpx;

			.huangzi {
				color: #ff9466;
			}
		}
	}
}

.xiabtn {
	margin-top: 50rpx;

	.btncss {
		height: 100rpx;

		&.huise {
			background: #eaeaea;
			color: #333;
			letter-spacing: normal;
		}
	}
}

.juan-div {
	padding: 30rpx;
	border-radius: 20rpx 20rpx 0 0;
	background: #f5f5f5;

	.gundong {
		max-height: 50vh;
		overflow: auto;
	}

	.list {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #fff;
		margin-top: 30rpx;
		border-radius: 20rpx;
		position: relative;

		.left {
			width: 176rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 70rpx;
			// font-weight: bold;
			color: #df686a;

			.small {
				font-size: 36rpx;
			}
		}

		.xian {
			width: 40rpx;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			height: 270rpx;

			.shang {
				background: #f5f5f5;
				width: 40rpx;
				height: 8%;
				border-radius: 0 0 50% 50%;
			}

			.zhong {
				height: 84%;
				display: flex;
				align-items: center;

				.zhongxian {
					border-left: 1rpx dashed #cccccc;
					height: 80%;
				}
			}

			.xia {
				background: #f5f5f5;
				width: 40rpx;
				height: 8%;
				border-radius: 50% 50% 0 0;
			}
		}

		.right {
			padding: 40rpx 0;
			width: 510rpx;

			.title {
				font-size: 32rpx;
				color: #333333;
				font-weight: bold;
				text-align: center;
			}

			.time {
				font-size: 26rpx;
				color: #666666;
				padding: 16rpx 0 30rpx;
				text-align: center;
			}

			.btn {
				.btncss {
					background: #df686a;
					width: 200rpx;
					height: 64rpx;
					margin: 0 auto;
					font-weight: normal;
					font-size: 28rpx;

					&.no {
						background: #cccccc;
					}
				}
			}
		}
	}
}
</style>